<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:pho="http://www.hitachivantara.com">
    <head>
        <title>Menu Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <link rel="stylesheet" type="text/css" href="../dojo/dijit/themes/pentaho/pentaho.css"/>

        <script type="text/javascript" src="webcontext.js?content=common-ui"></script>

        <script type="text/javascript">
            //<![CDATA[

            $.extend(djConfig, { modulePaths: {
                                    'pentaho.common': "../pentaho/common"
                                },
                                parseOnLoad: true,
                                baseUrl: '../dojo/dojo/'
                            });


              //]]>
        </script>

        <script language='javascript' type='text/javascript' src='../dojo/dojo/dojo.js.uncompressed.js'></script>
        <script language='javascript' type='text/javascript' src='../dojo/dojo/dojo-ext.js.uncompressed.js'></script>

        <script type="text/javascript">

            dojo.require("dojo.parser");
            dojo.require("pentaho.common.Menu");
            dojo.require("pentaho.common.MenuItem");
            dojo.require("pentaho.common.CheckedMenuItem");
            dojo.require("pentaho.common.PopupMenuItem");
            dojo.require("pentaho.common.MenuSeparator");

            function toggleCheck() {
                var menuItem = dijit.byId('checkoption');
                var checked = menuItem.get('checked');
                alert('Check Option state is now: '+checked);
            }
        </script>

    </head>

    <body class="tundra body" onload="">
        
        <div style="padding: 8px; background-color:white">
        
            <h3>UI Widgets - Menu Options</h3>
            This example shows you how create menu options.
            <p/>

            <div dojoType="pentaho.common.Menu" id="windowContextMenu" contextMenuForWindow="true" style="display: none;">
                <div dojoType="pentaho.common.MenuItem" onClick="alert('Option was clicked')">
                    Enabled Option
                </div>
                <div dojoType="pentaho.common.MenuItem" onClick="alert('This is disabled')" disabled="true">
                    Disabled Option
                </div>
                <div id="checkoption" dojoType="pentaho.common.CheckedMenuItem" onClick="toggleCheck()">
                    Enabled Check Option
                </div>
                <div id="checkoption2" dojoType="pentaho.common.CheckedMenuItem" onClick="toggleCheck()" checked="true" disabled="true">
                    Disabled Check Option
                </div>
                <div dojoType="pentaho.common.MenuSeparator">
                </div>
                <div dojoType="pentaho.common.PopupMenuItem">
                    <span>
                        Enabled Submenu
                    </span>
                    <div dojoType="pentaho.common.Menu" id="submenu1">
                        <div dojoType="pentaho.common.MenuItem" onClick="alert('Submenu option was clicked')">
                            Submenu Item One
                        </div>
                    </div>
                </div>
                <div dojoType="pentaho.common.PopupMenuItem" disabled="true">
                    <span>
                        Disabled Submenu
                    </span>
                    <div dojoType="pentaho.common.Menu" id="submenu2">
                        <div dojoType="pentaho.common.MenuItem" onClick="alert('Submenu 1!')">
                            Submenu Item One
                        </div>
                    </div>
                </div>
            </div>

            <span>
                Click anywhere on the page to see this menu.
            </span>
            
        </div>

    </body>
  
</html>
